﻿<template>
	<transition name="SHZY-common-layout">
		<div class="SHZY-preview-main" 
		v-loading="loading" element-loading-text="处理中..." 
		element-loading-spinner="el-icon-loading">
			<div class="SHZY-common-page-header">
				<el-page-header @back="goBack" content="打印"/>
				<div class="options">
					<el-button type="success" icon="el-icon-view" @click="printLabelPerview()" >预 览</el-button>
					<el-button type="primary" @click="LabelPrint()" icon="el-icon-document">PDF打印</el-button>
					<el-button type="primary" @click="zplPrint()" icon="el-icon-printer">打 印</el-button>
					<el-button @click="goBack">返 回</el-button>
				</div>
			</div>
			<div :style="{margin: '0 auto',width:'100%'}">
				<el-row :gutter="15" class=" main">
				<el-form ref="elForm" :model="dataForm" size="medium" label-width="80px" label-position="top" :rules="rules">
					<el-col :span="6">
						<el-form-item label="订单编号" prop="formOrderCode">
							<el-input v-model='dataForm.formOrderCode' clearable readonly :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="工单单号" prop="formworkOrderNo">
							<el-input v-model='dataForm.formworkOrderNo' clearable readonly :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="批次号" prop="formbatchNo">
							<el-input v-model='dataForm.formbatchNo' clearable readonly :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="物料号" prop="formMaterialCode">
							<el-input v-model='dataForm.formMaterialCode' clearable readonly :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="6">
						<el-form-item label="物料描述" prop="formMaterialName">
							<el-input v-model='dataForm.formMaterialName' clearable readonly :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="物料规格" prop="formSpecification">
							<el-input v-model='dataForm.formSpecification' clearable readonly :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="6">
						<el-form-item label="打印类型" prop="formPrintType">
							<el-input v-model='dataForm.formPrintType' clearable readonly :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="6">
						<el-form-item label="生产数量" prop="formQty">
							<el-input v-model='dataForm.formQty' clearable readonly :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="包装数量" prop="packageQty">
							<el-input v-model='dataForm.packageQty' placeholder='请输入包装数量' clearable required :style='{"width":"100%"}' @input="handleChange" >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="打印数量" prop="printQty">
							<el-input v-model='dataForm.printQty' placeholder='' clearable readonly :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="打印机" prop="printerIp">
							<el-select
                            v-model="dataForm.printerIp"
                            placeholder="请选择打印机"
                            clearable
                            required
                            :style="{ width: '100%' }"
                            filterable >
                            <el-option
                                v-for="(item, index) in printList"
                                :key="index"
                                :label="item.printerName"
                                :value="item.printerIp"
                            ></el-option>
                        </el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-card class="mb-20" shadow="always">
					<el-col :span="24">
						<el-form-item label-width="0">
							<img :src="imgurl"/>
						</el-form-item>
					</el-col>
						</el-card>
					</el-col>
				</el-form>
				</el-row>
			</div>
		</div>
	</transition>
</template>
<script>
	
	import { PrintPreview,Print,PrintZpl } from '@/api/common/printExecute'
	import {GetPrinterAll} from '@/api/common/printerConfig'
	export default {
		components: {  },
		props: [],
		data() {
			return {
				loading: false,
				visible: false,
				imgurl:'',
				printList:[],
				dataForm: {
					formDataId:'', // 业务id(用于查询数据源)
					formCustomerId: '',  // 客户id
					printConfigId:'', //打印配置id
					printQty: 0, // 打印数量
					packageQty: '', // 包装数量
					formOrderCode:'', // 订单编号
					formworkOrderNo:'', // 工单单号
					formbatchNo:'', // 批次号
					formMaterialCode:'',  // 物料号
					formMaterialName:'',  // 物料名称
					formSpecification:'',  // 物料规格
					formPrintType:'',  // 打印类型
					formQty:'',  // 生产数量
					printerIp:'', // 打印机
				},
            	Printdata: {
					CustomerId:'', // 打印记录的CustomerId
					EventCode: '', // 打印事件Code
					OrderNo: '',  // 订单编号
					MaterialId:'', // 物料Id
					MaterialCode: '', // 物料编码
					MaterialName: '', // 物料名称
					Specification:'', // 规格
					BatchNo:'', // 生产批次
					PackgeNum:0, // 包装数量
					PrintQty:0,  // 数量
				},
				rules: {
					packageQty:[
						{
							required:true,
							message:'请输入包装数量',
							trigger:'"blur"'
						},
						{
							pattern:/^[1-9]\d*$/,
							message:'请输入正确的数量',
							trigger:'"blur"'
						},
					],
					printQty:[
						{
							pattern:/^[1-9]\d*$/,
							message:'打印数量最小为1',
							trigger:'"blur"'
						},
					],
				},
			}
		},
		computed: {},
        watch: {},
        created() {
			this.init();
			this.getPrinterData();
		},
		mounted() {
        },
		methods: {
			goBack() {
                this.$emit('refresh')
            },
			getPrinterData(){
				GetPrinterAll().then(res => {
                this.printList = res.data.list;
            });
			},
			init(data) {
				this.visible = true;

				this.$nextTick(() => {
					this.$refs['elForm'].resetFields();
					this.dataForm = data;
				});
			},
			printLabelPerview(){
				this.$refs['elForm'].validate((valid) => {
                    if (valid) {
						this.loading = true;
						PrintPreview(this.dataForm).then((res) => {
							this.loading = false;
							const blob = new Blob([res], { type: 'image/jpeg' })
							const url = window.URL.createObjectURL(blob)
							this.imgurl = url;
							// window.open(`${url}#filename=Zy`, "_blank")
						}).catch((res) => {
							this.loading = false;
						})
                    }
                })
			},
			LabelPrint(){
				this.$refs['elForm'].validate((valid) => {
                    if (valid) {
						this.loading = true;
						Print(this.dataForm).then((res) => {
							this.loading = false;
							const blob = new Blob([res], { type: 'application/pdf' })
							const url = window.URL.createObjectURL(blob)
							window.open(`${url}#filename=Zy`, "_blank")
							
							//新增打印记录
							let Printdata = {
				            	CustomerId: this.dataForm.formDataId,
								EventCode: 'markWork',
				            	OrderNo: this.dataForm.formworkOrderNo,
				            	MaterialId: '',
				            	MaterialCode: this.dataForm.formMaterialCode,
				            	MaterialName: this.dataForm.formMaterialName,
				            	Specification: this.dataForm.formSpecification,
				            	BatchNo: this.dataForm.formbatchNo,
				            	PackgeNum: this.dataForm.packageQty,
				            	PrintQty: this.dataForm.formQty,
                        	};

							this.$emit('addlabelprint', Printdata)
							this.goBack();
						}).catch((res) => {
							this.loading = false;
						})
                    }
                })
			},
			zplPrint(){
				this.$refs['elForm'].validate((valid) => {
                    if (valid) {
						if(!this.dataForm.printerIp){
							this.$message({
                        		message: '请选择打印机',
                        		type: "warning",
                        		duration: 1000
                    		});
							return;
						}
						this.loading = true;
						PrintZpl(this.dataForm).then((res) => {
							this.loading = false;

							//新增打印记录
							let Printdata = {
				            	CustomerId: this.dataForm.formDataId,
								EventCode: 'markWork',
				            	OrderNo: this.dataForm.formworkOrderNo,
				            	MaterialId: '',
				            	MaterialCode: this.dataForm.formMaterialCode,
				            	MaterialName: this.dataForm.formMaterialName,
				            	Specification: this.dataForm.formSpecification,
				            	BatchNo: this.dataForm.formbatchNo,
				            	PackgeNum: this.dataForm.packageQty,
				            	PrintQty: this.dataForm.formQty,
                        	};

							this.$emit('addlabelprint', Printdata)
							this.goBack();
						}).catch((res) => {
							this.loading = false;
							this.$message({
                        		message: res.msg,
                        		type: "error",
                        		duration: 1000
                    		});
						})
                    }
                })
			},
			resetForm(){
                this.$refs['elForm'].resetFields()
                this.init()
            },
			handleChange(){
				if(this.dataForm.packageQty!='' && this.dataForm.packageQty > 0)
				{
					const _num = this.dataForm.formQty / this.dataForm.packageQty;
					if(_num < 0)
					{
						this.dataForm.printQty = 1;
					}else
					{
						const r = /^\+?[1-9][0-9]*$/;//正整数
						if(r.test(_num))
						{
							this.dataForm.printQty = _num;
						}else{
							this.dataForm.printQty = Math.ceil(_num);
						}
					}
				}else{
					this.dataForm.printQty = 0;
				}
					

			}
		}
	}
</script>
